<template>
  <client-only>
    <slide-verify
      v-if="isLoaded"
      :w="420"
      :h="160"
      :slider-text="sliderText"
      @success="handleSuccess"
      @fail="handleFail"
      @refresh="handleRefresh"
    />
  </client-only>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import SlideVerify from 'vue3-slide-verify'
import 'vue3-slide-verify/dist/style.css'

// 动态引入 Vue 3 组件
// const SlideVerify = defineAsyncComponent(() => import('vue3-slide-verify'))

const isLoaded = ref(false)
const sliderText = ref('向右拖动滑块完成验证')

const emit = defineEmits<{
  (e: 'verifySuccess'): void
}>()

const handleSuccess = () => {
  emit('verifySuccess')
}

const handleFail = () => {
  console.log('验证失败')
}

const handleRefresh = () => {
  console.log('刷新验证码')
}

const open = (val: boolean = true) => {
  isLoaded.value = val
}

defineExpose({
  open
})
</script>